<template>
  <div id="wrapper">
    <el-card class="box-card">
      <el-row>
        <el-col :xs="4" :sm="4" :lg="4">
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"><el-tooltip placement="top">
            <div slot="content">
              操作指南
            </div>
            <div class="icon-item">
              <a href="https://thundersoft.feishu.cn/docs/doccn3z9puFzS1K7t9gHtvkqROw" target="_blank">
                <img :src="logo">
              </a>
            </div>
          </el-tooltip></el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="12" :lg="12" class="col-box">
          <span class="col-span">部门：</span>
          <el-cascader
          style="width:80%"
            v-model="params['department']"
            @change="changeFilter"
            :options="departmentFilterData"
            :props="{ checkStrictly: true }"></el-cascader>
            
            
        </el-col>
        
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="16" :lg="16" class="col-box">
          <span class="col-span">技术领域：</span>
          <el-cascader
          style="width: 80%"
            v-model="params['technical_field']"
            :options="singleFilterData"
            :props="{ multiple: true }"
             @change="changeFilter"
            collapse-tags
            clearable></el-cascader>
        </el-col>
        <el-col :xs="24" :sm="8" :lg="8" class="col-box">
          <span class="col-span">时间段：</span>
          <el-date-picker
            v-model="dateRange"
            @change="changeDateRange"
            type="daterange"
            unlink-panels
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row class="advance-box" :class="advanceHidden ? 'advance-hidden' : 'advance-show'">
        <el-col :xs="24" :sm="12" :lg="12" class="col-box">
          <span class="col-span">项目需求：</span>
          <el-cascader
            v-model="params['site_power_id']"
            style="width:80%"
            :options="projectList"
            @change="changeProjectFilter"
            filterable clearable></el-cascader>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="col-box">
          <span class="col-span">关键字：</span>
          <el-input v-model="params['keywords']" placeholder="查询关键字,姓名/ldap" @change="changeFilter"></el-input>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="4" class="col-box" style='margin-left: .5%'>
          <span class="col-span">分配类型：</span>
          <el-select
              v-model="params['dispatch_type']"
              placeholder="请选择分配类型"
              @change="changeFilter"
              clearable
          >
            <el-option
                v-for="(v,i) in dispatchTypeList"
                :key="i"
                :label="v.label"
                :value="v.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="8" :lg="6" class="col-box" v-for="(item1,index1) in editList" :key="index1">
          <span class="col-span">{{ item1.name }}</span>
          <el-select v-model="params[item1.value]" multiple collapse-tags placeholder="请选择" @change="changeFilter">
              <el-option
              v-for="(v,i) in filterData[item1.value]"
              :key="item1.value+i"
              :label="v.text"
              :value="v.value">
              </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
      </el-row>
      <div class="advance-btn" @click="triggleSearch">{{advanceHidden ? '更多条件' : '收起'}}<i :class="advanceHidden ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></div>
      <el-row>
        <el-col :xs="8" :sm="8" :lg="8">
          <div class="num_word">成员总计：{{tableTotal}}（人）</div>
        </el-col>
      </el-row>
      <div>
        <div>
          <div style="width:30px;height:20px;background:#feecbade;display: inline-block"></div> <span style="font-size:14px;font-weight:normal">未分配满</span>
          <div style="width:30px;height:20px;background:#eb070763;display: inline-block"></div> <span style="font-size:14px;font-weight:normal">未投</span>
          <div style="width:30px;height:20px;background:#909399;display: inline-block"></div> <span style="font-size:14px;font-weight:normal">未入职/公休/节假日</span>
        </div>
        <div></div>
        <el-button type="success" class="btnStyle" @click="check()" v-show="showDown">工时导出</el-button>
        <el-button type="warning" class="btnStyle" @click="showDetile()" v-show="showCheck">工时预览</el-button>
        <el-button v-if="sharePermissions" class="btnStyle" @click="openAssist()" type="primary">增加部门资源协管</el-button>
        <el-button type="danger" class="btnStyle" icon="el-icon-plus" @click="addPerson()">新增成员</el-button>
        <div class="num_word" style="text-align: right;">tip: 单击任一起始周和结束周（双击任一周数）即可进行人员分配</div>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="日" name="first">
            <el-table class="el-table marTB"
                ref="singleTableDay"
                :data="tableDateDay"
                @cell-click="selectCell"
                :cell-class-name="addClass"
                :border="true"
                :header-cell-style="{background:'#eef1f6'}"
                style="width:100%;margin-bottom:15px"
                min-height="100" 
                v-loading="loading">
            <el-table-column align="center" property="name" fixed="left" label="员工姓名" min-width="110">
                <template slot="header" slot-scope="scope" >
                    <div>
                        <span>员工姓名</span>
                        <span>
                        <i class="el-icon-caret-right" @click="toggle1()" v-if='clicked===1' style="cursor:pointer;font-size: 22px;"></i>
                        <i class="el-icon-caret-bottom" @click="toggle()"  v-else style="cursor:pointer;font-size: 22px;"></i>
                        </span>
                    </div>
                    </template>
                <template slot-scope="scope"> 
                    <div v-if="scope.row.name === '未投总计'">
                        {{scope.row.name}}
                    </div>
                    <div v-else>
                    <el-tooltip placement="top" effect="light" v-if="scope.row.name">
                    <div slot="content">{{scope.row.dept}}</div>
                    <span>{{scope.row.name}}</span>
                    </el-tooltip>
                    </div>
                </template>
                </el-table-column>
                <el-table-column align="center" property="employee_id" label="员工ID" v-if='clicked'></el-table-column>
                <el-table-column align="center" property="rank" label="职级" v-if='clicked'></el-table-column>
                <el-table-column align="center" property="type" label="员工类型" v-if='clicked'>
                </el-table-column>
                <el-table-column align="center" property="working_years" label="司龄" width="60" v-if='clicked'></el-table-column>
                <el-table-column align="center" property="position" label="工作岗位" width="100" v-if='clicked'>
                <template slot-scope="scope">
                        <span v-for="(v,i) in scope.row.position" :key="v.id">
                            <span>{{v.name}}<span v-if="v&&(i != scope.row.position.length-1)"> / </span></span>
                        </span>
                </template>
                </el-table-column>
                <el-table-column align="center" property="working_mode" label="工作模式" v-if='clicked'>
                <template slot-scope="scope">
                        <span v-for="(v,i) in scope.row.working_mode" :key="v.id">
                        {{v.name}}<span v-if="v&&(i != scope.row.working_mode.length-1)"> / </span>
                        </span>
                </template>
                </el-table-column>
                <el-table-column align="center" property="business_area" label="业务领域" width="150" v-if='clicked'>
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light" v-if="scope.row.business_area.length > 0">
                    <div slot="content" v-for="(v,i) in scope.row.business_area" :key="i">
                        <div style="line-height: 20px">{{v.name}}</div>
                    </div>
                    <el-tag type="primary">{{scope.row.business_area[0].name}}</el-tag>
                    </el-tooltip>
                </template>
                </el-table-column>
                <el-table-column  align="center" property="technical_field" label="技术领域" width="200" v-if='clicked'>
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light" v-if="scope.row.technical_field.length > 0">
                    <div slot="content" v-for="(v,i) in scope.row.technical_field" :key="i">
                        <div style="line-height: 20px">{{v.display}}</div>
                    </div>
                    <el-tag type="primary">{{scope.row.technical_field[0].name.length > 15 ? scope.row.technical_field[0].name.substring(0,14)+'...':scope.row.technical_field[0].name}}</el-tag>
                    </el-tooltip>
                </template>
                </el-table-column>
                <el-table-column align="center" property="status_show" width="120" label="人员状态" v-if='clicked'>
                <template slot-scope="scope">
                    <div v-if="scope.row.status_show">
                    <el-tag v-if="scope.row.status == 1" type="success" effect="plain">{{scope.row.status_show}}</el-tag>
                    <el-tag v-else type="danger" effect="plain">{{scope.row.status_show}}</el-tag>
                    </div>

                </template>
                </el-table-column>
                <el-table-column align="center" type="cell" v-for="(v,i) in dateList" :key="i" :property="v" :label="v+'日'" min-width="170"  >
                    <template slot-scope="scope">
                    <div v-if="scope.row.matter_map[v]" class="status-box" >
                        <span class="status-style">休假</span>
                    </div>
                    <div v-else style="margin-bottom: 4px;" v-for="(work,ind) in scope.row.working_hours[v]" :key="ind" >
                        <span v-if="scope.row.name === '未投总计'" style="color:red">
                        {{ (tableTotal - work.spend).toFixed(1) }}
                        </span>
                        <span v-else>
                        <el-tooltip v-if="work.project_name && work.project_name != '未投总计'" placement="top" effect="light" >
                        <div slot="content">
                            <div v-if="work">
                                <!-- Math.round -->
                                {{work.project_name}}（{{ Math.round(work.spend*10)/10 }}）
                            </div>
                            <div style="margin-top:5px">
                                {{"项目PM："+work.project_manager}}
                            </div>
                        </div>
                        <el-tag type="primary" closable @close="handleClose(scope.row,v,ind)" style="margin-right:5px">
                            {{work.project_name.length > 10 ? work.project_name.substring(0,9)+'...':work.project_name+'('+Math.round(work.spend*10)/10+')'}}
                        </el-tag>
                        </el-tooltip>
                        </span>
                    </div>
                    </template>

                </el-table-column>
                <el-table-column align="center" fixed="right" label="操作" min-width="150" >
                <template slot-scope="scope">
                    <div v-if="scope.row.name != '未投总计'">
                    <el-button type="text" size="mini" @click="details(scope.row.employee_id)">
                        查看
                    </el-button>
                    <el-button type="text" size="mini" @click="edit(scope.row.employee_id)">
                        编辑
                    </el-button>
                    <el-popconfirm v-if="scope.row.expatriate" title="确定撤回该员工吗？" style="padding-left: 10px" @onConfirm="deleteDispatch(scope.row.employee_id)">
                        <el-button slot="reference" type="text" size="mini" style="color: red">
                        撤回
                        </el-button>
                    </el-popconfirm>
                    <el-button v-if="!scope.row.expatriate" type="text" size="mini" @click="dispatch(scope.row.employee_id)">
                        外派
                    </el-button>
                    </div>
                </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="月" name="second">
            <el-table class="el-table marTB"
                ref="singleTable"
                :data="tableDataMonth"
                @cell-click="selectCell"
                :cell-class-name="addClass1"
                :border="true"
                :header-cell-style="{background:'#eef1f6'}"
                style="width:100%;margin-bottom:15px"
                min-height="100" 
                v-loading="loading">
            <el-table-column align="center" property="name" fixed="left" label="员工姓名" min-width="110">
                <template slot="header" slot-scope="scope" >
                    <div>
                        <span>员工姓名</span>
                        <span>
                        <i class="el-icon-caret-right" @click="toggle1()" v-if='clicked===1' style="cursor:pointer;font-size: 22px;"></i>
                        <i class="el-icon-caret-bottom" @click="toggle()"  v-else style="cursor:pointer;font-size: 22px;"></i>
                        </span>
                    </div>
                    </template>
                <template slot-scope="scope"> 
                    <div v-if="scope.row.name === '未投总计'">
                        {{scope.row.name}}
                    </div>
                    <div v-else>
                    <el-tooltip placement="top" effect="light" v-if="scope.row.name">
                    <div slot="content">{{scope.row.dept}}</div>
                    <span>{{scope.row.name}}</span>
                    </el-tooltip>
                    </div>
                </template>
                </el-table-column>
                <el-table-column align="center" property="employee_id" label="员工ID" v-if='clicked'></el-table-column>
                <el-table-column align="center" property="rank" label="职级" v-if='clicked'></el-table-column>
                <el-table-column align="center" property="type" label="员工类型" v-if='clicked'>
                </el-table-column>
                <el-table-column align="center" property="working_years" label="司龄" width="60" v-if='clicked'></el-table-column>

                <el-table-column align="center" property="position" label="工作岗位" width="100" v-if='clicked'>
                <template slot-scope="scope">
                        <span v-for="(v,i) in scope.row.position" :key="v.id">
                        <span>{{v.name}}<span v-if="v&&(i != scope.row.position.length-1)"> / </span></span>
                        </span>
                </template>
                </el-table-column>
                <el-table-column align="center" property="working_mode" label="工作模式" v-if='clicked'>
                <template slot-scope="scope">
                        <span v-for="(v,i) in scope.row.working_mode" :key="v.id">
                        {{v.name}}<span v-if="v&&(i != scope.row.working_mode.length-1)"> / </span>
                        </span>
                </template>
                </el-table-column>
                <el-table-column align="center" property="business_area" label="业务领域" width="150" v-if='clicked'>
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light" v-if="scope.row.business_area.length > 0">
                    <div slot="content" v-for="(v,i) in scope.row.business_area" :key="i">
                        <div style="line-height: 20px">{{v.name}}</div>
                    </div>
                    <el-tag type="primary">{{scope.row.business_area[0].name}}</el-tag>
                    </el-tooltip>
                </template>
                </el-table-column>
                <el-table-column  align="center" property="technical_field" label="技术领域" width="200" v-if='clicked'>
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light" v-if="scope.row.technical_field.length > 0">
                    <div slot="content" v-for="(v,i) in scope.row.technical_field" :key="i">
                        <div style="line-height: 20px">{{v.display}}</div>
                    </div>
                    <el-tag type="primary">{{scope.row.technical_field[0].name.length > 15 ? scope.row.technical_field[0].name.substring(0,14)+'...':scope.row.technical_field[0].name}}</el-tag>
                    </el-tooltip>
                </template>
                </el-table-column>
                <el-table-column align="center" property="status_show" width="120" label="人员状态" v-if='clicked'>
                <template slot-scope="scope">
                    <div v-if="scope.row.status_show">
                    <el-tag v-if="scope.row.status == 1" type="success" effect="plain">{{scope.row.status_show}}</el-tag>
                    <el-tag v-else type="danger" effect="plain">{{scope.row.status_show}}</el-tag>
                    </div>

                </template>
                </el-table-column>
                <el-table-column align="center" type="cell" v-for="(v,i) in monthList" :key="i" :property="v" :label="v+'月'" min-width="170"  >
                    <template slot-scope="scope">
                    <div v-if="scope.row.matter_map[v]" class="status-box" >
                        <span class="status-style">休假</span>
                    </div>
                    <div v-else style="margin-bottom: 4px;" v-for="(work,ind) in scope.row.working_hours[v]" :key="ind" >
                        <span v-if="scope.row.name === '未投总计'" style="color:red">
                        {{ (tableTotal - work.spend) | rounding1 }}
                        </span>
                        <span v-else>
                        <el-tooltip v-if="work.project_name && work.project_name != '未投总计'" placement="top" effect="light" >
                        <div slot="content">
                            <div v-if="work">
                                <span v-if="work.spend.toString().split('.')[1]">
                                    <span v-if="work.spend.toString().split('.')[1].length>3">
                                        {{work.project_name}}（{{work.spend.toFixed(3)}}）
                                    </span>
                                    <span v-else>
                                        {{work.project_name}}（{{work.spend}}）
                                    </span>
                                </span>
                                <span v-else>
                                    {{work.project_name}}（{{work.spend}}）
                                </span>
                            </div>
                            <div style="margin-top:5px">
                                {{"项目PM："+work.project_manager}}
                            </div>
                        </div>
                        <el-tag type="primary" closable @close="handleCloseMon(scope.row,v,ind)" style="margin-right:5px;width: 92%;">
                            <span v-if="work.spend.toString().split('.')[1]">
                                <span v-if="work.spend.toString().split('.')[1].length>3">
                                     {{work.project_name.length > 10 ? work.project_name.substring(0,8)+'...':work.project_name+'('+work.spend.toFixed(3)+')'}}
                                </span>
                                <span v-else>
                                    {{work.project_name.length > 10 ? work.project_name.substring(0,8)+'...':work.project_name+'('+work.spend+')'}}
                                </span>
                            </span>
                             <span v-else>
                                    {{work.project_name.length > 10 ? work.project_name.substring(0,8)+'...':work.project_name+'('+work.spend+')'}}
                             </span>
                           
                        </el-tag>
                        </el-tooltip>
                        </span>
                    </div>
                    </template>

                </el-table-column>
                <el-table-column align="center" fixed="right" label="操作" min-width="150" >
                <template slot-scope="scope">
                    <div v-if="scope.row.name != '未投总计'">
                    <el-button type="text" size="mini" @click="details(scope.row.employee_id)">
                        查看
                    </el-button>
                    <el-button type="text" size="mini" @click="edit(scope.row.employee_id)">
                        编辑
                    </el-button>
                    <el-popconfirm v-if="scope.row.expatriate" title="确定撤回该员工吗？" style="padding-left: 10px" @onConfirm="deleteDispatch(scope.row.employee_id)">
                        <el-button slot="reference" type="text" size="mini" style="color: red">
                        撤回
                        </el-button>
                    </el-popconfirm>
                    <el-button v-if="!scope.row.expatriate" type="text" size="mini" @click="dispatch(scope.row.employee_id)">
                        外派
                    </el-button>
                    </div>
                </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
      </el-tabs>
      

      <el-pagination
      v-show="tableTotal > 10" background layout="prev, pager, next" :page-size="params.pageSize" @size-change="pageSizeChange" @current-change="pageNoChange" :current-page="params.pageNo" style="text-align: center" :total="tableTotal">
      </el-pagination>
     
    <!-- <Resourcerequ></Resourcerequ> -->

    </el-card>
    <el-dialog title="人员查看" :visible.sync="dialogVisible" width="80%" :destroy-on-close="true">
      <TalentDialog v-if="dialogVisible" :itemFormData="itemFormData" :isEdit="false"></TalentDialog>
    </el-dialog>
    <el-dialog title="人员编辑" :visible.sync="dialogEditVisible" width="80%" :destroy-on-close="true">
      <TalentDialog v-if="dialogEditVisible" :itemFormData="itemFormData" :filterData="filterData" :singleFilterData="singleFilterData" :isEdit="true" @submit="editSubmit"></TalentDialog>
    </el-dialog>
    <el-dialog title="人员分配" :visible.sync="distributeVisible" width="80%" :destroy-on-close="true" @close="getTableDataDay"><!-- getDataList-->
      <Distribute v-if="distributeVisible" :projectList="projectList" :project_id="params['site_power_id']" :dateRange="dateRange" :employee_id="employee_id" @changeConfig="configChange"></Distribute>
    </el-dialog>
    <el-dialog title="人员外派" :visible.sync="dispatchVisible" width="600px" :destroy-on-close="true">
      <Dispatch :employee_id="employee_id" :departmentAllData="departmentAllData" @submitDispatch="submitDispatch"></Dispatch>
    </el-dialog>

   

    <el-dialog title="工时分配" :visible.sync="manPowerVisible" width="600px" :destroy-on-close="true"  @close="clearSelectRange" >
      <ManPowerDay v-if="manPowerVisible" :employee_id="employee_id" :loadingBtn="loadingBtn" :weekCol="selectWeek" :departmentAllData="departmentAllData" @submitManPower="submitManPower" @isShowday="parentEvent"></ManPowerDay>
    </el-dialog>

    <el-dialog title="工时分配" :visible.sync="manPowerVisible1" width="600px" :destroy-on-close="true" @close="clearSelectRange1">
      <ManPowerMonth v-if="manPowerVisible1" :employee_id="employee_id" :loadingBtn="loadingBtn" :monthCol="selectWeek1" :departmentAllData="departmentAllData" @submitManPowerMon="submitManPowerMon" @isShowMonth="parentEventMon"></ManPowerMonth>
    </el-dialog>

    <el-dialog title="部门协管" :visible.sync="assistVisible" width="800px" :destroy-on-close="true" @close="clearSelectRange">
      <Assist v-if="assistVisible"></Assist>
    </el-dialog>
    <el-dialog title="工时预览" :visible.sync="dialogTableVisible" width="80%">
        <div style="margin-bottom:10px">
            <span class="demonstration" style="margin-right:5px">时间选择</span>
            <el-date-picker
            v-model="value2"
            type="month"
            placeholder="选择月"
            @change="startchange($event)">
            </el-date-picker>
        </div>  
        <div style="float:right;margin-bottom: 10px">
          <div style="height:30px;width:50px;background:#feecbade;display:inline-block;margin-bottom: -7px"></div><span style="margin-bottom:5px">工时已投满</span>
          <div style="height:30px;width:50px;background:#eb070763;display:inline-block;margin-bottom: -7px"></div><span>工时未投</span>
          <div style="height:30px;width:50px;background:#909399;display:inline-block;margin-bottom: -7px"></div><span>未入职/公休/节假日</span>
        </div>
        <!-- @selection-change="handleSelectionChange" -->
        <el-button type="success" @click="dowmLoadwork()" style="margin:-3px 21px 10px 0;float:right; ">导出工时</el-button>
      <el-table
        :data="gridData"
        border
        ref="multipleTable"
        
        tooltip-effect="dark"
        v-loading="loading1"
        :cell-style="tableCellStyle"
        min-height='20'>
        <!-- <el-table-column type="selection" width="55" fixed="left"> </el-table-column> -->
        <el-table-column  label="人员" width="150" align="center" fixed="left">
          <template slot-scope="scope">
            {{scope.row.user}}
          </template>
        </el-table-column>
        <el-table-column v-for="(d,index) in daysCol" :key="index" :label="d" width="150" align="center" >
          <template slot-scope="scope">
              {{ scope.row.spend_data[d]}}
          </template>
        </el-table-column>
      </el-table>
      <!-- <div style="margin-left: 81%">
        <el-button type="success" @click="makeSure(true)" style="margin-top:15px; ">确定</el-button>
        <el-button type="primary" @click="makeSure(false)" style="margin-top:15px; ">一键确定所有</el-button>
      </div> -->
      <el-pagination
        v-show="tableTotal2 > 20"
        background
        layout="prev, pager, next"
        :page-size="params2.pageSize2"
        @size-change="pageSizeChange2"
        @current-change="pageNoChange2"
        style="text-align: center"
        :current-page.sync="currentPage"
        :total="tableTotal2">
      </el-pagination>
    </el-dialog>
    <el-dialog title="工时详情" :visible.sync="dialogTableVisible1" width="60%" >
      <span class="demonstration">时间选择</span>
        <el-date-picker
          v-model="valueMon"
          type="month"
          placeholder="选择月"
          @change="startchange2($event)"
          value-format="yyyy-MM" 
          format="yyyy-MM"
          style="margin-left: 10px;width:150px">
        </el-date-picker>
        <span style="margin-left: 30px">事业部</span>
        <el-select
          v-model="deptValue"
          multiple
          clearable
          filterable
          collapse-tags
          @change="deptSearch($event)"
          style="margin-left: 10px;width:270px"
          placeholder="请选择">
          <el-option
            v-for="item in deptOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <div style="float:right">
          <div style="height:30px;width:50px;background:#13ce666b;display:inline-block;margin-bottom: -7px"></div><span style="margin-bottom:5px">工时已确定</span>
          <div style="height:30px;width:50px;background:#eb070763;display:inline-block;margin-bottom: -7px"></div><span>工时未确定</span>
        </div>
      <el-table
        :data="gridData1"
        border
        v-loading="loading2"
        style="margin:15px 0 15px 0"
        :cell-class-name="addClass2"
        min-height='20'
        width="100%"
        element-loading-text="加载中...">
        <el-table-column  label="部门" align="center" fixed="left">
          <template slot-scope="scope">
            {{scope.row.dept_name}}
          </template>
        </el-table-column>
        <el-table-column :label="showMonth" align="center" >
          <template slot-scope="scope">
            总人数:{{scope.row.user_count}} / 确认人数:{{scope.row.confirm_count}}
          </template>
        </el-table-column>
      </el-table>
        <el-button type="success" @click="downLoad()" style="margin-top:15px;margin-left: 82%">导出工时报表</el-button>
      <el-pagination
        v-show="tableTotal3 > 10"
        background
        layout="prev, pager, next"
        :page-size="params3.pageSize"
        @current-change="pageNoChange3"
        style="text-align: center"
        :current-page.sync="currentPage1"
        :total="tableTotal3">
      </el-pagination>
    </el-dialog>
     <el-dialog title="新增成员：" :visible.sync="dispatchVisibleAdd" width="600px" :destroy-on-close="true">
        <el-form class="form-box" label-position="left">
            <el-row :gutter="20">
                <el-col :span="8" :xs="24" :sm="24" :lg="24">
                    <el-form-item class="form-item" label="新增成员：">
                        <el-tag
                            :key="tag.employee_id"
                            v-for="tag in memberList"
                            closable
                            :disable-transitions="false"
                            style="height: 36px;line-height: 36px"
                            @close="handleCloseAdd(tag)">
                            {{tag.name}}
                        </el-tag>
                        <div style="margin: 10px 0 0 82px">
                            <el-autocomplete
                                v-model="tagValue"
                                :fetch-suggestions="querySearchAsync"
                                @select="handleSelect($event)"
                                placeholder="请输入姓名和LDAP账号"
                                clearable
                                multiple
                                collapse-tags
                                style="width:100%;margin-top:-20px"
                                ></el-autocomplete>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-btn">
            <el-button class="button-new-tag" type="info" @click="handleInputCancel">取消</el-button>
            <el-button type="primary" @click="handleInputConfirm">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { getHeaderName } from '@/app.config'
import talentDialog from './components/talentDialog.vue'
import configDialog from './components/configDialog.vue'
import distribute from './components/distribute.vue'
import dispatch from './components/dispatch.vue'
import manPower from './components/manPower.vue'
import manPowerMonth from './components/manPowerMonth.vue'
import manPowerDay from './components/manPowerDay.vue'
import assist from './components/assistDialog.vue'
import { Loading } from 'element-ui'
import { DateUtil } from './utils.js'
import http from '@/views/sys/axios'
import resourcerequ from './components/resourcerequ'
import addPerson from './components/addPerson'



export default {
  // inject: ['reload'],
  components: {
    TalentDialog: talentDialog,
    ConfigDialog: configDialog,
    Distribute: distribute,
    Dispatch: dispatch,
    ManPower: manPower,
    ManPowerMonth:manPowerMonth,
    ManPowerDay:manPowerDay,
    Assist: assist,
    Resourcerequ:resourcerequ,
    AddPerson:addPerson
  },
  data() {
    return {
        falseArr:[],
        memberList: [],
        tagValue: '',
        options: [],
        timeout: null,
        selectMan: [],
        departmentAllData: [],

        dispatchVisibleAdd:false,
        selectTime:0,
        colorShow:false,
        selectC:[],
        newRow:'',
        newColumn:'',
        monthList:[],
        dateList:[],
        tableDateDay:[],
        activeName:"first",
        technical:'',
        technicalOptions:[],
        newArrG:[],
        currentPageG: 1, //初始页
        pagesizeG: 4, //    每页的数据
        TectableData:[],
        pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            // }, {
            //     text: '最近三个月',
            //     onClick(picker) {
            //     const end = new Date();
            //     const start = new Date();
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            //     picker.$emit('pick', [start, end]);
            //     }
            // },
            // {
            //     text: '半年',
            //     onClick(picker) {
            //     const end = new Date();
            //     const start = new Date();
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            //     picker.$emit('pick', [start, end]);
            //     }
            // },
            // {
            //     text: '一年',
            //     onClick(picker) {
            //     const end = new Date();
            //     const start = new Date();
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            //     picker.$emit('pick', [start, end]);
            //     }
            },
            ]
            },
        deptOptions:[],
        clicked:false,
        showCheck:false,
        showDown:false,
        currentPage:1,
        currentPage1:1,
        deptIds:[],
        dispatchTypeList:[
            {
            label: '未分配满',
            value: 1
            },
            {
            label: '未投',
            value: 2
            },
        ],
        mon:[],
        showMonth:'',
        dialogTableVisible1:false,
        gridData1:[],
        foolishArr:[],
        stupidArr:[],
        multipleSelection: [], // 已选中id合集
        daysCol:[],
        paramMonth:'',
        paramData:[],
        value2:'',
        deptValue:'',
        valueMon:'',
        gridData:[],
        dialogTableVisible:false,
        tableData1:{},
        weekRange:[],
        list1: [],
        searchOptions:[],
        searchOptions1:[],
        proNames:'',
        saveData:{},
        deptId:'',
        proName:'',
        params1: {
            pageNo: 1,
            pageSize: 5
        },
        params2: {
            page: 1,
            pageSize2: 20
        },
        params3: {
            page: 1,
            pageSize: 10
        },
        tableTotal1:0,
        tableTotal2:0,
        tableTotal3:0,
        GAPtableData:[],
        ind:[],
        tableDataSum: {},
        loading: false,
        loadingGAP:false,
        loading1: false,
        loading2: false,
        loading3: false,
        employee_id: '',
        project_id: '',
        projectList: [],
        dialogVisible: false,
        dialogEditVisible: false,
        dialogConfigVisible: false,
        distributeVisible: false,
        dispatchVisible: false,
        tableDataMonth: [],
        tableTotal: 0,
        itemFormData:{},
        filterData:{},
        singleFilterData: [],
        departmentFilterData: [],
        departmentAllData: [],
        distributeList: [],
        weekList: [],
        aa:[],
        monthRange: '',
        params: {
            pageNo: 1,
            pageSize: 10
        },
        editList: [{
            name: '职级：',
            value: 'rank'
        },{
            name: '工作岗位：',
            value: 'position'
        },{
            name: '工作模式：',
            value: 'working_mode'
        },
        {
            name: '软件平台：',
            value: 'software_platform'
        },{
            name: '业务领域：',
            value: 'business_area'
        },{
            name: '编程语言：',
            value: 'programing_language'
        },{
            name: '人员状态：',
            value: 'status'
        },{
            name: '员工类型：',
            value: 'type'
        }],
        startWeek: '',
        endWeek: '',
        dateRange: [],
        dept_word: '',
        logo: require('../../assets/question.png'),
        startCell: -1,
        startCell1: -1,
        endCell: -1,
        endCell1: -1,
        selectRowIndex: -1,
        selectRowIndex1: -1,
        manPowerVisible: false,
        manPowerVisible1: false,
        selectWeek: [],
        selectWeek1: [],
        assistVisible: false,
        sharePermissions: false,
        loadingBtn: false,
        advanceHidden: true,
        datas1:{},
        downDept:[],
        checkWeekends:[],
        allIds:[],
        // bgColor:true,
    }
  },
  computed:{
    dataGap(){
      return Array.from(new Set([...this.TectableData.slice((this.currentPageG-1)*this.pagesizeG,this.currentPageG*this.pagesizeG),...this.newArrG]))
    }  
  },
  filters: {
    rounding (value) {
      if(value || value === 0) {
        return Number(value).toFixed(1)
      }
    },
    rounding1 (value) {
      if(value || value === 0 ) {
          if(value.toString().split(".")[1]){
              if(value.toString().split(".")[1].length>3){
                return Number(value).toFixed(3)
                }
          }
      }
    }
  },
  created() {
    Promise.all([this.getDepartmentOwn(),this.getProjectTree()]).then((res) => {
      let data1 = res[0].data.data
      let data2 = res[1].data.data
      this.dept_word = data1.dept_name
      this.params['department'] = data1
      this.getDepartmentFilter()
      this.projectList = data2
      data2.map((v1,i1) => {
        if(v1.children && v1.children.length > 0) {
          v1.children.map((v2,i2) => {
            if(v2.value == this.$route.params.id) {
              this.id2Tech(v2['technical_field_id'])
              this.params['technical_field'] = [v2['technical_field_id']]
              this.dateRange = [v2['project_workflow'].project_start_date,v2['project_workflow'].project_end_date]
              this.weekList = DateUtil.estLabourWeek(v2['project_workflow'].project_start_date,v2['project_workflow'].project_end_date)
            }
          })
        }
      })
    //   this.getDataList()
      this.getTableDataDay()
      this.getDaysType()
    })
  },
  mounted() {
    this.$nextTick(() => {
      if(!this.$route.params.id)  {
        this.defaultWeekTime()
      }
      this.getPermission()
      this.getDepartmentAllFilter()
      this.getFilter()
      this.getSingleFilter()

    })
    this.initData()
    this.getdeptOptions()
    
  },
  methods: {
    dowmLoadwork(){
      this.loading1 = true;
      let downParam = {
        month: this.paramMonth,
        date: this.paramData,
        project_ids: this.downProIds,
      };
      this.$axios({
        url:process.env.VUE_APP_SOURSE_MANAGE_HOST +'/api/v1/car_dept_employee/get_working_hours_to_excel',
        method: 'get',
        headers: getHeaderName(),
        responseType: 'blob',
        data: downParam,
      })
        .then((res) => {
          if (res.status === 200) {
            const blob = new Blob([res.data]);
            const fileName = '工时报表.xlsx';
            // for IE
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
              // for Non-IE (chrome, firefox etc.)
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
              this.loading1 = false;
              this.$message({
                type: 'success',
                message: '导出成功!',
              });
            }
          } else {
            this.loading1 = false;
            this.$message.error('下载出错了!');
          }
        })
        .catch((err) => {
          this.$message.error('下载出错了!');
          this.loading1 = false;
        });
    },
    addPerson(){
        this.dispatchVisibleAdd = true
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/expatriate_list?dept_id='+this.deptId ,
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.memberList = res.data.data
        })
    },
    handleCloseAdd(tag) {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST+"/api/v1/expatriate_list",
            method: "delete",
            headers: getHeaderName(),
            data:{"employee_ids":[tag.employee_id]}
        }).then(res => {
            if(res.data.code == 200) {
                this.addPerson()
                this.getTableDataDay()
                this.getTableDataMonth()
                res.data.data.map(item => {
                    this.$message.success(item)
                })
                this.tagValue = '';
            } else {
                this.$message.error(res.data.message)
            }
        })
    },
    querySearchAsync(queryString, cb) {
        if(queryString.length>=2){
            let members = [{}];
            let searchParams = {
                "keywords":queryString,
                "status":2
            }
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_select_employee',
                method: "post",
                headers: getHeaderName(),
                data:searchParams
            }).then(res => {
                for (let i of res.data.data) {
                    i.value = i.label 
                }
                members = res.data.data;
                cb(members);
            }).catch(error => {
                console.log(error);
            });
        }
    },
    handleSelect(e) {
        this.selectMan.push(e.id)
    },
    createFilterMember(queryString) {
        return (item) => {
            return item.name.indexOf(queryString) === 0;
        };
    },
    handleInputCancel() {
        this.dispatchVisibleAdd = false;
        this.tagValue = '';
        this.getTableDataDay()
        this.getTableDataMonth()
    },
    handleInputConfirm() {
        if(this.tagValue == '') {
            this.$message.error("新增人员不能为空");
            return false;
        }
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/expatriate_list',
            method: "post",
            headers: getHeaderName(),
            data: {
                employee_ids: this.selectMan,
                dept_id: this.deptId
            }
        }).then(res => {
            if(res.data.code == 200) {
                this.addPerson()
                res.data.data.map(item => {
                    this.$message.success(item)
                })
                this.tagValue = '';
                this.selectMan = [];
                this.getTableDataDay()
                this.getTableDataMonth()
            } else {
                this.$message.error(res.data.message)
            }
        })
        
    },
    parentEventMon(data){
        this.manPowerVisible1 = data
    },
    parentEvent(data){
        this.manPowerVisible = data
    },
    getTableDataMonth(){
        this.loading = true
        let params = Object.assign({},this.params)
        for(let key in params){
            if(Array.isArray(params[key])) {
            if(params[key].length > 0) {
                if(key == 'department') {
                params[key] = params[key][params[key].length - 1]
                } else {
                if(key == 'technical_field') {
                    let list = []
                    list = params[key].map((v) => {
                    if(Array.isArray(v)) {
                        return v[v.length - 1]
                    } else {
                        return v
                    }
                    })
                    params[key] = list.join()
                }
                if(key == 'site_power_id') {
                    if(Array.isArray(params[key])) {
                    params[key] = params[key][1]
                    }
                }
                if(key != 'technical_field' && key != 'site_power_id')  {
                    params[key] = params[key].join()
                }
                }
            } else {
                delete params[key]
            }
            }
        }
        params['date_range'] = this.monthList;
        params['show_status'] = 1;
        this.params1 = params
        // this.params2 = params
        this.deptId = params.department
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee_v2',
            method: "post",
            headers: getHeaderName(),
            data: params
        }).then(res => {
            if(res.data.code == 200 ) {
                this.params1.pageNo = 1
                this.tableDataMonth = res.data.data.data
                this.tableTotal = res.data.data.totalCount
                this.$nextTick(() => {
                    if(this.$refs.singleTable) {
                    this.$refs.singleTable.doLayout(); // 解决表格错位
                    }
                });
            }
            this.loading = false
        }) 
    },
    //   获取起止时间的所有日期
    getDayAll(starDay, endDay) {
    　　var arr = [];
        var dates = [];
    
        // 设置两个日期UTC时间
    　　　var db = new Date(starDay);
    　　　var de = new Date(endDay);
    
        // 获取两个日期GTM时间
    　　　var s = db.getTime() - 24 * 60 * 60 * 1000;
    　　　var d = de.getTime() - 24 * 60 * 60 * 1000;
    
        // 获取到两个日期之间的每一天的毫秒数
    　　　for (var i = s; i <= d;) {
    　　　　　　i = i + 24 * 60 * 60 * 1000;
            arr.push(parseInt(i))
    　　　}
        
        // 获取每一天的时间  YY-MM-DD
        for( var j in arr ){
            var time = new Date(arr[j]);
            var year = time.getFullYear(time);
            var mouth = (time.getMonth() + 1)>=10?(time.getMonth() + 1):('0'+(time.getMonth() + 1));
            var day = time.getDate()>=10?time.getDate():('0'+time.getDate());
            var YYMMDD = year + '-' + mouth + '-' + day;
            dates.push(YYMMDD)
        }
        if(dates.indexOf('NaN-0NaN-0NaN')!=-1){
            dates.pop()
        }else{
            dates
        }
        return dates
    },
    // 时间段筛选
    changeDateRange(e) {
        let dataArrA = []
        let dataArrA1 = []
        let monArr = []
        var datetimeBegin=e[0].getFullYear() + '-' + (e[0].getMonth() + 1) + '-' + e[0].getDate() + ' ';
        var datetimeEnd=e[1].getFullYear() + '-' + (e[1].getMonth() + 1) + '-' + e[1].getDate() + ' ';
        dataArrA = this.getDayAll(datetimeBegin, datetimeEnd) ;//起止时间的所有日期
        //去掉月份前面的0
        dataArrA.map(val => {
            let strArrA = val.split("-")
            strArrA = strArrA.map(function(v){
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let newVal = strArrA.join("-")
            dataArrA1.push(newVal)
        })
        this.dateList = dataArrA1
        monArr = this.getMonthRange(dataArrA1[0], dataArrA1[dataArrA1.length-1])
        //去掉月份前面的0
        let tempB = []
        monArr.map(val => {
            let strArrmonthList = val.split("-")
            strArrmonthList = strArrmonthList.map(function(v){
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let newVal = strArrmonthList.join("-")
           tempB.push(newVal)
        })
        this.monthList = tempB

        if(this.activeName=="first"){
            this.getTableDataDay()
            this.getDaysType()
        }else{
            this.getTableDataMonth()
            this.getDaysType()
        }
        
    },
    getTableDataDay(){
        this.loading = true
        let params = Object.assign({},this.params)
        for(let key in params){
            if(Array.isArray(params[key])) {
            if(params[key].length > 0) {
                if(key == 'department') {
                params[key] = params[key][params[key].length - 1]
                } else {
                if(key == 'technical_field') {
                    let list = []
                    list = params[key].map((v) => {
                    if(Array.isArray(v)) {
                        return v[v.length - 1]
                    } else {
                        return v
                    }
                    })
                    params[key] = list.join()
                }
                if(key == 'site_power_id') {
                    if(Array.isArray(params[key])) {
                    params[key] = params[key][1]
                    }
                }
                if(key != 'technical_field' && key != 'site_power_id')  {
                    params[key] = params[key].join()
                }
                }
            } else {
                delete params[key]
            }
            }
        }
        params['date_range'] = this.dateList;
        params['show_status'] = 0;
        this.params1 = params
        // this.params2 = params
        this.deptId = params.department
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee_v2',
            method: "post",
            headers: getHeaderName(),
            data: params
        }).then(res => {
            if(res.data.code == 200 ) {
                this.showCheck = res.data.data.is_car_dept
                this.showDown = res.data.data.show_working_hours
                this.params1.pageNo = 1
                // this.gettableDate()
                this.tableDateDay = res.data.data.data
                this.tableTotal = res.data.data.totalCount
                this.$nextTick(() => {
                    if(this.$refs.singleTableDay) {
                    this.$refs.singleTableDay.doLayout(); // 解决表格错位
                    }
                });
            }
            this.loading = false
        })
    },
    handleClick(e){
        this.activeName = e.name
        this.params.pageNo = 1
        if(this.activeName=="second"){
            this.getTableDataMonth()
        }else{
            this.getTableDataDay()
        }
    },
    // 切换每页条数时
    handleSizeChange: function(size) {
        this.pagesizeG = size;
    },
    // 切换当前页码时
    handleCurrentChange: function(currentPage) {
        this.currentPageG = currentPage;
    },
    gettableDate(){
        this.loadingGAP = true
        this.newArrG=[]
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/technical_field_gap',
            method: "post",
            headers: getHeaderName(),
            data:this.params2
        }).then(res => {
        this.loadingGAP = false
        this.TectableData = res.data.data.data; 
        let newA = res.data.data.data
        this.newArrG.push(newA[newA.length-1]); //取出统计行
        this.searchOptions = res.data.data.project_names
        this.technicalOptions = res.data.data.technical_fields
        })
    },
    handleCloseMon(row,v,index){
        let deleteParams = {}
        deleteParams.employee_id = row.employee_id;
        deleteParams.project_id = row.working_hours[v][index].site_power_id;
        deleteParams.spend = '0';
        deleteParams.month_display = v
        this.$axios({
            url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_employee/month_assign`,
            method: "post",
            headers: getHeaderName(),
            data: deleteParams
        }).then(res=>{
            if(res.data.code===200 && res.data.status== "success"){
                row.working_hours[v].splice(index, 1);
                this.$message.success('删除成功')
            }else{
                this.$message.success(res.data.message)
            }
        });
        this.getTableDataMonth()
        this.getTableDataDay()
    },
    handleClose(row,v,index){
        let deleteParams = {}
        deleteParams.employee_id = row.employee_id;
        deleteParams.project_id = row.working_hours[v][index].site_power_id;
        deleteParams.spend = '0';
        deleteParams.day_display = v
        this.$axios({
            url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_employee/assign`,
            method: "post",
            headers: getHeaderName(),
            data: deleteParams
        }).then(res=>{
            if(res.data.code===200 && res.data.status== "success"){
            row.working_hours[v].splice(index, 1);
            this.$message.success('删除成功')
            }else{
            this.$message.success(res.data.message)
            }
        });
        this.getTableDataDay()
        this.getTableDataMonth()
    },
    tableCellStyle(row){
        if(row.columnIndex>0) {
            if(Date.parse(row.row.joinworkdate)>Date.parse(row.column.label)){
            if(row.row.joinworkdate){
                return 'background-color:#909399;'
            }
            }else{
            if(this.checkWeekends.includes(row.column.label)){
                return 'background-color:#909399;'
            }
            if(this.falseArr.includes(row.column.label)){
                return 'background-color:#909399;'
            }
            if(row.row.spend_data[row.column.label]==8){
                return 'background-color:#feecbade'
            }
            if(row.row.spend_data[row.column.label]==0){
                return 'background-color:#eb070763'
            }
            }
        }
    },
    deptSearch(e){
        this.downDept = e
        this.datas1['top_dept'] = e
        this.currentPage1=1
        this.check()
    },
    getdeptOptions(){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/get_car_top_dept',
            method: "get",
            headers: getHeaderName()
        }).then(res => {
            if(res.data.code === 200){
            this.deptOptions = res.data.data
            }
        })
    },
    toggle1(){
        this.clicked = 0
    },
    toggle(){
        this.clicked = 1
    },
    returnClass() {
        return this.clicked==0 ? 'el-icon-caret-right' : 'el-icon-caret-bottom' 
    },
    downLoad(res,name){
        this.loading2 = true
        let datas2 = {}
        datas2["month"] = this.paramMonth
        datas2["dept_ids"] = this.deptIds
        datas2["date"] = this.mon
        datas2["top_dept"] = this.downDept
        this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/get_working_hours_to_excel',
        method: "post",
        headers: getHeaderName(),
        responseType: 'blob',
        data:datas2
        }).then(res => {
        if(res.status === 200) {
            const blob = new Blob([res.data]);
            const fileName = '工时报表.xls';
            // for IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
            // for Non-IE (chrome, firefox etc.)
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
            this.loading2 = false
            this.$message({
            type:"success",
            message:"导出成功!"
            })
        }
        } else {
            this.loading3 = false
            this.$message.error('下载出错了!');
        }
        }).catch(err => {
            this.$message.error('下载出错了!');
            this.loading = false
        })
    },
    startchange2(e){
        this.currentPage1=1
        let nowTime = new Date(e)
        let getYear = nowTime.getFullYear()
        let mon = nowTime.getMonth() + 1
        let day = nowTime.getDate()
        this.showMonth = getYear + '-' + mon
        day>25 ? mon+=1 : mon
        this.paramMonth = this.showMonth // 导出时month参数
        this.currentPage1 = this.params3.page
        this.check()
        this.mon = this.startchange1(e)  // 导出时date参数
    },
    pageNoChange3(val) {
        this.currentPage1=val
        this.check()
    },
    check(){
        this.dialogTableVisible1 = true
        this.loading2 = true
        this.datas1['page'] = this.currentPage1
        this.datas1['month'] = this.paramMonth
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/dept_confirm',
            method: "post",
            headers: getHeaderName(),
            data: this.datas1
        }).then((res => {
            if(res.data.code === 200){
            this.loading2 = false
            this.gridData1 = res.data.data.data
            this.tableTotal3 = res.data.data.totalCount
            this.deptIds = []
            this.params3.page = 1
            this.gridData1.forEach((v,i) =>{
                this.deptIds.push(v.dept_id)
            })
            }else{
            this.loading2 = false
            this.$message({
                type:error,
                message:"获取失败!"
            })
            }
        }))
    },
    addClass2({row,column,rowIndex,columnIndex}){
        if(column.label != "部门"){
            if(row.status === false){
            return 'cell-two'
        }else if(row.status === true){
            return 'cell-three'
        }
        }
    },
    makeSure(flag){
        let paramsData = {}
        paramsData['month'] = this.paramMonth
        if(flag){
        paramsData['confirm_employee_ids'] = this.multipleSelection
        paramsData['cancel_employee_ids'] = this.foolishArr
        paramsData['date'] = this.paramData
        }else{
        paramsData['confirm_employee_ids'] = this.allIds
        paramsData['cancel_employee_ids'] = []
        paramsData['date'] = this.paramData
        }
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/confirm',
            method: "post",
            headers: getHeaderName(),
            data: paramsData
        }).then((res => {
        if(res.data.code === 200){
            this.currentPage=1
            this.showDetile()
            this.$message(res.data.message)
        }else{
            this.$message(res.data.message)
        }
        }))
    },
    pageNoChange2(val) {
        this.currentPage=val
        this.showDetile()
    },
    pageSizeChange2(val) {
    },
    toggleSelection(rows) {
        if (rows) {
            rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
            });
        } else {
            this.$refs.multipleTable.clearSelection();
        }
    },
    handleSelectionChange(val) {
        this.multipleSelection=[]
        val.forEach((v,i) => {
        this.multipleSelection.push(v.employee_id)
        })
        this.foolishArr = this.stupidArr.filter(key => !this.multipleSelection.includes(key))
    },
    showDetile(){
        this.dialogTableVisible = true
        this.loading1 = true
        this.params2['month'] = this.paramMonth
        this.params2['date'] = this.paramData
        this.params2['page'] = this.currentPage
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/get_working_hours',
            method: "post",
            headers: getHeaderName(),
            data: this.params2
        }).then(res => {
            if(res.data.code === 200){
            this.loading1 = false
            this.gridData = res.data.data.data
            this.checkWeekends = res.data.data.weekend_list
            this.allIds = res.data.data.all_employee_ids
            this.stupidArr = []
            this.gridData.map((v,i) => {
            this.stupidArr.push(v.employee_id)
            })
            this.$nextTick(()=>{
            this.gridData.forEach(row => {
                if(row.status){
                this.$refs.multipleTable.toggleRowSelection(row,true);
                }
            })
            })
            this.tableTotal2 = res.data.data.totalCount
            }else{
            this.loading1 = false
            }
        })
    },
    // 默认当前月
    initData(){
        var date5 = new Date();
        var year5 = date5.getFullYear();
        var month5 = date5.getMonth() + 1;
        let day5 = date5.getDate()
        let monthList1 = []
        day5>25 ? month5+=1 : month5
        var toMonth = year5 + '-' + month5 ;
        this.showMonth = toMonth
        this.value2 = toMonth;
        this.paramMonth = toMonth
        this.paramData = this.startchange1(this.value2)
        this.mon = this.paramData
        this.daysCol = []
        this.paramData.map((k,i) => {
            let strArr1 = k[0].split("-")
            strArr1 = strArr1.map(function(v){
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let newVal1 = strArr1.join("-")
            this.daysCol.push(newVal1)
        })
        this.dateList = this.daysCol
        monthList1 = this.getMonthRange(this.dateList[0], this.dateList[this.dateList.length-1])
        //去掉月份前面的0
        let temp = []
        monthList1.map(val => {
            let strArrmonthList = val.split("-")
            strArrmonthList = strArrmonthList.map(function(v){
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let newVal = strArrmonthList.join("-")
           temp.push(newVal)
        })
        this.monthList = temp
    },
    startchange(e){
        let nowTime = new Date(e)
        let getYear = nowTime.getFullYear()
        let startData,endData,startTime,endTime
        var Y = nowTime.getFullYear() + '-';
        var M = nowTime.getMonth() + 1
        this.paramMonth = getYear + '-' + M
        this.showMonth = getYear + '-' + M
        // 前一月所在时间日期
        if(M==1 || M==2 || M==4 || M==6 || M==8 || M==9 || M==11) { //判断31天时
            startData = new Date(nowTime-7*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
        }else if(M==5 || M==7 || M==10 || M==12){ // 判断30天时
            startData = new Date(nowTime-6*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
        }
        if(M==3){
            if(getYear%4==0 && getYear%100!=0 || getYear%400==0){ //判断为闰年时 29
            startData = new Date(nowTime-5*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
            }else { //判断为平年时 28
            startData = new Date(nowTime-4*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
            }
        }
        // 当前月所在日期 24号
            let y1 = getYear
            let m1 = M
            let d1 = nowTime.getDate() + 23
            endTime = y1+'-'+m1+'-'+d1;
            let dataArr = []
            dataArr = this.getAllDate(startTime,endTime)
            let dataArr1 = []
            let Arr3 = []
            //循环遍历数组
            dataArr.map(val => {
            //去掉月份前面的0
            let strArr = val.split("-")
            strArr = strArr.map(function(v){
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let newVal = strArr.join("-")
            let week3 = DateUtil.datetoWeek(newVal)
            let Arr = []
            Arr3.push(newVal)
            Arr.push(newVal,week3)
            dataArr1.push(Arr)
            })
            this.daysCol = []
            this.daysCol = Arr3
            this.paramData = dataArr1
            this.mon = dataArr1
            this.currentPage=1
            this.showDetile()
            return this.paramData = dataArr1
    },
    startchange1(e){
        this.currentPage=1
        this.currentPage1=1
        let nowTime = new Date(e)
        let getYear = nowTime.getFullYear()
        let startData,endData,startTime,endTime
        var Y = nowTime.getFullYear() + '-';
        var M = nowTime.getMonth() + 1
        this.paramMonth = getYear + '-' + M
        var D = nowTime.getDate();
        var h = nowTime.getHours() + ':';

        // 前一月所在时间日期
        if(M==1 || M==2 || M==4 || M==6 || M==8 || M==9 || M==11) { //判断31天时
            startData = new Date(nowTime-7*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
        }else if(M==5 || M==7 || M==10 || M==12){ // 判断30天时
            startData = new Date(nowTime-6*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
        }
        if(M==3){
            if(getYear%4==0 && getYear%100!=0 || getYear%400==0){ //判断为闰年时 29
            startData = new Date(nowTime-5*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
            }else { //判断为平年时 28
            startData = new Date(nowTime-4*24*3600*1000);
            let y = startData.getFullYear();
            let m = startData.getMonth()+1;
            let d = startData.getDate();
            startTime = y+'-'+m+'-'+d;
            }
        }
        // 当前月所在日期 24号
            let y1 = getYear
            let m1 = M
            let d1 = nowTime.getDate() + 23
            endTime = y1+'-'+m1+'-'+d1;
            let dataArr = []
            dataArr = this.getAllDate(startTime,endTime)
            let dataArr1 = []
            let Arr3 = []
            //循环遍历数组
            dataArr.map(val => {
            //去掉月份前面的0
            let strArr = val.split("-")
            strArr = strArr.map(function(v){
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let newVal = strArr.join("-")
            let week3 = DateUtil.datetoWeek(newVal) 
            let Arr = []
            Arr3.push(newVal)
            Arr.push(newVal,week3)
            dataArr1.push(Arr)
            })

            this.daysCol = []
            this.daysCol = Arr3
            return this.paramData = dataArr1
    },
    // 计算起止时间的所有日期
    format(time){
        let ymd = ''
        let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
        let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
        ymd += time.getFullYear() + '-' // 获取年份。
        ymd += mouth + '-' // 获取月份。
        ymd += day // 获取日。
        return ymd // 返回日期。
    },
    getAllDate (start, end) {
        let dateArr = []
        let startArr = start.split('-')
        let endArr = end.split('-')
        let db = new Date()
        db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
        let de = new Date()
        de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
        let unixDb = db.getTime()
        let unixDe = de.getTime()
        let stamp
        const oneDay = 24 * 60 * 60 * 1000;
        for (stamp = unixDb; stamp <= unixDe;) {
            dateArr.push(this.format(new Date(parseInt(stamp))))
            stamp = stamp + oneDay
        }
        return dateArr
    },
    tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 === 0) {
            return 'warning-row';
        }
        return '';
    },
    getSummaries1(param) {
        const { columns, data } = param;
        const sums = [];
        //循环处理所有列数据
        columns.forEach((column, index) => {
            if (index === 0) {
            sums[index] = '总计';
            return;
            }else if(index === 1){
            var word1 = <div class="borders">{'总需求'}</div>
            var word2 = <div class="borders">{'总实际'}</div>
            var word3 = <div style="width: 193px;margin-left: -14px;">{'总GAP'}</div>
            sums[index] = [word1,word2,word3];
            return;
            }
            //将每列的所有数据数字化处理成一个数组
            const values1 = data.map(item => {
            if(column.type == 'cell') {
                let obj = item.value
                let spendTime1 = 0
                spendTime1 = Number(obj[column.property].need)
                return spendTime1
            } else {
                return NaN
            }
            });
            const values2 = data.map(item => {
            if(column.type == 'cell') {
                let obj = item.value
                let spendTime2 = 0
                spendTime2 = Number(obj[column.property].get)
                return spendTime2
            } else {
                return NaN
            }
            });
            if (!values1.every(value => isNaN(value))) {
            var num1 = values1.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                return (parseFloat(prev) + parseFloat(curr)).toFixed(1)
                } else {
                return parseFloat(prev).toFixed(1)
                }
            }, 0);
            var num2 = values2.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                return (parseFloat(prev) + parseFloat(curr)).toFixed(1)
                } else {
                return parseFloat(prev).toFixed(1)
                }
            }, 0);
            var html1 = <div class="borders">{num1}</div>
            var html2 = <div class="borders">{num2}</div>
            var html3 = <div style="width: 193px;margin-left: -14px;">{(num1-num2).toFixed(1)}</div>
            sums[index] = [html1,html2,html3]
            }
            else{
            sums[index] = []
            }
        });
        return sums;
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        //循环处理所有列数据
        columns.forEach((column, index) => {
            if (index === 0) {
            sums[index] = '总计';
            return;
            }
            //将每列的所有数据数字化处理成一个数组
            const values = data.map(item => {
            if(column.type == 'cell') {
                let obj = item.working_hours
                let spendTime = 0
                obj[column.property].map((v,i) => {
                spendTime += Number(v.spend)
                })
                return spendTime
            } else {
                return NaN
            }
            });
            //当前列的所有数据全是数字类型时
            if (!values.every(value => isNaN(value))) {
            //将当前列数据数组中的所有值，从左到右依次累加处理
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                return (parseFloat(prev) + parseFloat(curr)).toFixed(1)
                } else {
                return parseFloat(prev).toFixed(1)
                }
            }, 0);
            } else {
            sums[index] = '';
            }
        });
        return sums;
    },
    changeSearch(val,type){
        if(type=='项目'){
            this.params2['select_project_names'] = val
        }
        if(type=='技术领域'){
            this.params2['select_technical_field_ids'] = val
        }
        this.currentPageG  = 1
        this.gettableDate()
    },
    saveFn(index,row){
        let datas = {
            technical_field_id:row.technical_field_id,
            department:this.deptId,
            project_name:this.proName,
            json_data:row.site_power
        }
        row.showEdit = false
        this.$axios({
            // url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/update/project_need',
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/change_technical_field_need',
            method: "post",
            headers: getHeaderName(),
            data: datas
        }).then((res => {
            if(res.data.code === 200){
            this.$message({
                type:"success",
                message:"修改成功!"
            })
            this.gettableDate()
            }
    }))
    this.$set(this.TectableData,index,row)
    },
    cancelFn(index,row){
        row.showEdit = false
        this.gettableDate()
    },
    editFn(index,row){
        row.showEdit = true
        this.proName = row.project_name
        this.$set(this.TectableData,index,row)
    },
    triggleSearch() {
        this.advanceHidden = !this.advanceHidden
    },
    week2date(val) {
        let arr = val.split("-")
        let year = arr[0]
        let week = arr[1]

        let betDay = new Date(year+1+'-01-01 00:00:00').getTime() - new Date(year+'-01-01 00:00:00').getTime()
        let newD1 = new Date(year,0,1)
        let newD2 = new Date(year,11,31)

          let dayMS=24*60*60*1000
          let firstDay=firstDay=(7-newD1.getDay())*dayMS
        let weekMS=0
        if(newD1.getDay() < 4) {
            weekMS=(week-2)*7*dayMS
        } else {
            weekMS=(week-1)*7*dayMS
        }
          let result=newD1.getTime()+firstDay+weekMS+5*dayMS
        newD1.setTime(result)
      return val + '周 \n(' + newD1.getFullYear() + "/" + (newD1.getMonth()+1) + "/" +newD1.getDate() + ')'
    },
    defaultWeekTime() {
        let startD = new Date()
        let initY = startD.getFullYear();
        let initM = startD.getMonth() + 1; //当前月
        let initMS = startD.getMonth(); //上月
        let initD = startD.getDate();
        let beginDate,endDate;
        let toTime = new Date(initY,initM,1); //当前月第一天
        let toTimeS = new Date(initY,initMS,1); // 上月第一天
        //默认开始时间
        if(initM==1 || initM==2 || initM==4 || initM==6 || initM==8 || initM==9 || initM==11){
        let m 
        initD>=25 ? m=initM : m=initMS  // 判断25号前后？前月为上月，后为本月
        let y = startD.getFullYear(); 
        let d = toTimeS.getDate() + 24;
        beginDate = y+'-'+m+'-'+d;
        }else if(initM==5 || initM==7 || initM==10 || initM==12){ // 判断30天时
        let m 
        initD>=25 ? m=initM : m=initMS
        let y = startD.getFullYear();
        let d = toTimeS.getDate() + 24;
        beginDate = y+'-'+m+'-'+d;
        }
        if(initM==3){
        if(initY%4==0 && initY%100!=0 || initY%400==0){ //判断为闰年时 29
            let y = startD.getFullYear();
            let m ;
            initD>=25 ? m=initM : m=initMS;
            let d = toTimeS.getDate() + 24;
            beginDate = y+'-'+m+'-'+d;
        }else { //判断为平年时 28
            let y = startD.getFullYear();
            let m ;
            initD>=25 ? m=initM : m=initMS;
            let d = toTimeS.getDate() + 24;
            beginDate = y+'-'+m+'-'+d;
        }
        }
        // 默认结束时间
        let d1 = toTime.getDate() + 23
        initD>=25 ? initM+=1 : initM
        endDate = initY+'-'+initM+'-'+d1;
        this.dateRange = [beginDate,endDate]
        this.weekList = DateUtil.estLabourWeek(beginDate,endDate)
    },
    defaultMonthTime() {
        let end = new Date()
        let start = new Date()

        let ys = start.getFullYear()
        let ms = start.getMonth()

        let ye, me
        if(ms > 6) {
        ye = start.getFullYear() + 1
        me = start.getMonth() + 5 - 12
        } else {
        ye = start.getFullYear()
        me = start.getMonth() + 5
        }

        if(ms.toString().length == 1) {
        ms = "0" + ms
        }
        if(me.toString().length == 1) {
        me = "0" + me
        }
        let starting = `${ys}-${ms}`
        let ending = `${ye}-${me}`
        this.monthRange = [starting, ending]
    },
    getMonthRange(start,end) {
        var result = [];
        var starts = start.split('-');
        var ends = end.split('-');
        var staYear = parseInt(starts[0]);
        var staMon = parseInt(starts[1]);
        var endYear = parseInt(ends[0]);
        var endMon = parseInt(ends[1]);
        while (staYear <= endYear) {
            if (staYear === endYear) {
                while (staMon <= endMon) {
                    if(staMon.toString().length == 1) {
                        result.push(`${staYear}-0${staMon}`);
                    } else {
                        result.push(`${staYear}-${staMon}`);
                    }
                    staMon++;

                }
                staYear++;
            } else {
                if (staMon > 12) {
                    staMon = 1;
                    staYear++;
                }
                if(staMon.toString().length == 1) {
                    result.push(`${staYear}-0${staMon}`);
                } else {
                    result.push(`${staYear}-${staMon}`);
                }
                staMon++;
            }
        }
        return result;
    },
    clearSelectRange1() {
        if(this.selectRowIndex1 != -1) {
            let index = this.selectRowIndex1
            let row = this.tableDataMonth[index]
            row.selectList = []
            this.$set(this.tableDataMonth, index, row)
            this.selectRowIndex1 = -1
        }
    },
    getDaysType(){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/assign/get_days_type?day_range='+this.dateList.toString(),
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            let playDay = res.data.data
            this.falseArr = []
            for(var aa in playDay){
                if(!playDay[aa]){
                    this.falseArr.push(aa)
                }
            }
        })
    },
    addClass({row,column,rowIndex,columnIndex}){
            row.index = rowIndex;
            column.index = columnIndex;
            if(column.type == 'cell'){ // 判断置灰
                let tableTime = column.label
                tableTime = tableTime.substr(0, tableTime.length - 1) //表头时间
                if(row.joinworkdate){  //入职时间之前
                    if(Date.parse(tableTime)<Date.parse(row.joinworkdate)){
                        return 'cell-grey'
                    }
                }
                if(this.falseArr.includes(tableTime)){ //休息日
                    return 'cell-grey'
                }
            }
            if(column.type == 'cell' ) {// && row.name!='未投总计'
                if(this.clicked){
                    // 展开
                    if(row.selectList && row.selectList[columnIndex - 10] && row.selectList[columnIndex - 10].value) {
                        return 'cell-green';
                    }
                    else {
                    if(column.property && row.matter_map[column.property]) {
                        return 'cell-light'
                    } else {
                        let spendTime = 0
                        if(row.working_hours[column.property]){
                        row.working_hours[column.property].forEach( v =>{
                            spendTime += v.spend
                        })
                        if(spendTime < 1 && spendTime > 0){
                            return 'cell-one'
                        }
                        if(spendTime == 1){
                            return ''
                        }
                        if(spendTime == 0) {
                            return 'cell-zore'
                        }
                        }
                    }
                    }
                }else{
                    // 默认不展开时
                    if(row.selectList && row.selectList[columnIndex - 1] && row.selectList[columnIndex - 1].value) {
                        return 'cell-green';
                    }else {
                        if(column.property && row.matter_map[column.property]) {
                            return 'cell-light'
                        } else {
                            let spendTime = 0
                            if(row.working_hours[column.property]){
                            row.working_hours[column.property].forEach( v =>{
                                spendTime += v.spend
                            })
                            if(spendTime.toFixed(1) < 1 && spendTime.toFixed(1) > 0){
                                return 'cell-one'
                            }
                            if(spendTime.toFixed(1) == 1){
                                
                                return ''
                            }
                            if(spendTime.toFixed(1) == 0) {
                                return 'cell-zore'
                            }
                            }
                        }
                    }
                }
            } else {
                return ''
            }
    },
    addClass1({row,column,rowIndex,columnIndex}){
        row.index = rowIndex;
        column.index = columnIndex;

        if(column.type == 'cell'&& row.joinworkdate){
            const replaceStr1 = (str, index, char) => {
                const strAry = str.split('');
                strAry[index] = char;
                return strAry.join('');
            }
            let monthD = replaceStr1(column.label, 6, '-1') // 当月第一天
            if(new Date(monthD).getFullYear()==new Date(row.joinworkdate).getFullYear()){ // 对比同年
                if(new Date(monthD).getMonth()+1 < new Date(row.joinworkdate).getMonth()+1){
                    return 'cell-grey'
                }
            }
            if(new Date(monthD).getFullYear() < new Date(row.joinworkdate).getFullYear()){ // 不同年
                return 'cell-grey'
            }
        }
        if(column.type == 'cell' ) {// && row.name!='未投总计'
            if(this.clicked){
                // 展开
                if(row.selectList && row.selectList[columnIndex - 10] && row.selectList[columnIndex - 10].value) {
                    return 'cell-green';
                }
                else {
                if(column.property && row.matter_map[column.property]) {
                    return 'cell-light'
                } else {
                    let spendTime = 0
                    if(row.working_hours[column.property]){
                    row.working_hours[column.property].forEach( v =>{
                        spendTime += v.spend
                    })
                    if(spendTime < 1 && spendTime > 0){
                        return 'cell-one'
                    }
                    if(spendTime == 1){
                        return ''
                    }
                    if(spendTime == 0) {
                        return 'cell-zore'
                    }
                    }
                }
                }
            }else{
                // 默认不展开时
                if(row.selectList && row.selectList[columnIndex - 1] && row.selectList[columnIndex - 1].value) {
                    return 'cell-green';
                }else {
                    if(column.property && row.matter_map[column.property]) {
                        return 'cell-light'
                    } else {
                        let spendTime = 0
                        if(row.working_hours[column.property]){
                        row.working_hours[column.property].forEach( v =>{
                            spendTime += v.spend
                        })
                        if(spendTime < 1 && spendTime > 0){
                            return 'cell-one'
                        }
                        if(spendTime == 1){
                            
                            return ''
                        }
                        if(spendTime == 0) {
                            return 'cell-zore'
                        }
                        }
                    }
                }
            }
        } else {
            return ''
        }
    },
    subSet(arr1, arr2) {
        var arr = [];
        for(var i=0;i<arr1.length;i++){
            if(arr2.indexOf(""+arr1[i]) < 0){
                arr.push(arr1[i]);
            }
        }
        return arr;
    },
   selectCell(row, column, cell, event) {
        if(this.activeName == "first"){ // 判断是日月
            //表头时间
            let d = column.label
            d = d.substr(0,d.length-1)
            let sdtime = new Date(d) //表头标准时间
            if(column.type != 'cell') {
                return false
            }else{
                if(row.joinworkdate && sdtime<Date.parse(row.joinworkdate) ){ // 对比入职时间和表头时间
                    return false
                }
                let tableTime = column.label
                tableTime = tableTime.substr(0, tableTime.length - 1)
                if(this.falseArr.includes(tableTime)){ //休息日
                    return false
                }
            }
            if(this.selectRowIndex != row.index) {
                this.clearSelectRange()
                this.selectRowIndex = row.index
                this.startCell = -1
                this.endCell = -1
            }
            let index = row.index
            let colIndex = this.clicked ? column.index - 10:column.index - 1  
            let inputList = []
            for(let key in this.dateList) {
                inputList.push({
                    key: key,
                    value: this.dateList[key]
                })
            }
            this.selectWeek = []
            let selectWeek = []
            let selectList = []
            if((this.startCell < 0 && this.endCell < 0) || (this.startCell >= 0 && this.endCell >= 0)) {
                this.startCell = colIndex
                this.endCell = -1
                inputList.map((v,i) => {
                if(i == colIndex) {
                    selectList.push({
                    key: v.key,
                    value: true
                    })
                } else {
                    selectList.push({
                    key: v.key,
                    value: false
                    })
                }
                })
            } else {
                this.endCell = colIndex
                let min = this.startCell <= this.endCell ? this.startCell : this.endCell
                let max = this.startCell <= this.endCell ? this.endCell : this.startCell
                inputList.map((v,i) => {
                if(i >= min && i <= max) {
                    selectList.push({
                    key: v.key,
                    value: true
                    })
                    selectWeek.push(v.value)
                } else {
                    selectList.push({
                    key: v.key,
                    value: false
                    })
                }
                })
                this.employee_id = row.employee_id
                this.manPowerVisible = true
            }
            this.selectWeek = selectWeek
            // console.log("公休",this.falseArr)
            // 对比公休时间差异
            this.selectWeek = this.subSet(this.selectWeek,this.falseArr)
            row.selectList = selectList
            this.$set(this.tableDateDay, index, row)
        }else{
            //表头时间
            let d = column.label
            d = d.substr(0,d.length-1)
            let sdtime = new Date(d) //表头标准时间
            if(column.type != 'cell') {
                return false
            }else{
                // 对比入职时间和表头时间
                // if(row.joinworkdate && sdtime<Date.parse(row.joinworkdate)){
                //     return false
                // }
                const replaceStr2 = (str, index, char) => {
                    const strAry = str.split('');
                    strAry[index] = char;
                    return strAry.join('');
                }
                let monthD = replaceStr2(column.label, 6, '-1') // 当月第一天
                if(new Date(monthD).getFullYear()==new Date(row.joinworkdate).getFullYear()){ // 对比同年
                    if(new Date(monthD).getMonth()+1 < new Date(row.joinworkdate).getMonth()+1){
                        return false
                    }
                }
                if(new Date(monthD).getFullYear() < new Date(row.joinworkdate).getFullYear()){ // 不同年
                    return false
                }
            }
            if(this.selectRowIndex1 != row.index) {
                this.clearSelectRange1()
                this.selectRowIndex1 = row.index
                this.startCell = -1
                this.endCell = -1
            }
            let index = row.index
            let colIndex = this.clicked ? column.index - 10:column.index - 1  
            let inputList = []
            for(let key in this.monthList) {
                inputList.push({
                    key: key,
                    value: this.monthList[key]
                })
            }
            let selectWeek = []
            let selectList = []
            if((this.startCell < 0 && this.endCell < 0) || (this.startCell >= 0 && this.endCell >= 0)) {
                this.startCell = colIndex
                this.endCell = -1
                inputList.map((v,i) => {
                if(i == colIndex) {
                    selectList.push({
                    key: v.key,
                    value: true
                    })
                } else {
                    selectList.push({
                    key: v.key,
                    value: false
                    })
                }
                })
            } else {
                this.endCell = colIndex
                let min = this.startCell <= this.endCell ? this.startCell : this.endCell
                let max = this.startCell <= this.endCell ? this.endCell : this.startCell
                inputList.map((v,i) => {
                if(i >= min && i <= max) {
                    selectList.push({
                    key: v.key,
                    value: true
                    })
                    selectWeek.push(v.value)
                } else {
                    selectList.push({
                    key: v.key,
                    value: false
                    })
                }
                })
                this.employee_id = row.employee_id
                this.manPowerVisible1 = true
            }
            this.selectWeek1 = selectWeek
            row.selectList = selectList
            this.$set(this.tableDataMonth, index, row)
        }
        
    },
    clearSelectRange() {
        if(this.selectRowIndex != -1) {
            let index = this.selectRowIndex
            let row = this.tableDateDay[index]
            row.selectList = []
            this.$set(this.tableDateDay, index, row)
            this.selectRowIndex = -1
        }
    },
    getPermission() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/share/permission',
            method: "get",
            headers: getHeaderName()
        }).then(res => {
            if(res.data.status == 403) {
            this.$message.error('您无查看权限');
            this.$router.push({
                path: '/'
            })
            }
            if(res.data.code == 200 && res.data.status != 403) {
            this.sharePermissions = res.data.data
            }
        })
    },
    getDataList() {
    },
    getFilter() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/filter',
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.filterData = res.data.data
        })
    },
    getProjectFilter() {
        this.loading = true
        return new Promise((resolve, reject) => {
            this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/demand/list',
            method: "get",
            headers: getHeaderName(),
            }).then(res => {
            if(res.data.status == 403) {
                this.$message.error('您无查看权限');
                this.$router.push({
                    path: '/'
                })
            }
            if(res.data.code == 200 && res.data.status != 403) {
                resolve(res)
            }

            }).catch(error => {
            reject(error)
            })
        })

    },
    getProjectTree() {
        return new Promise((resolve, reject) => {
            this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/demand/tree',
            method: "get",
            headers: getHeaderName(),
            }).then(res => {
            if(res.data.status == 403) {
                this.$message.error('您无查看权限');
                this.$router.push({
                    path: '/'
                })
            }
            if(res.data.code == 200 && res.data.status != 403) {
                resolve(res)
            }

            }).catch(error => {
            reject(error)
            })
        })

    },
    id2Tech(id) {
        this.$axios({
            url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/filter/technical_field/${id}/relation`,
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            if(res.data.status == 403) {
            this.$message.error('您无查看权限');
            this.$router.push({
                path: '/'
            })
            }
            if(res.data.code == 200 && res.data.status != 403) {
            this.params['technical_field'] = res.data.data
                this.params.pageNo = 1
                // this.getDataList()
                this.getTableDataDay()
            }

        })
    },
    getSingleFilter() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.singleFilterData = res.data.data
        })
    },
    getDepartmentOwn() {
        return new Promise((resolve, reject) => {
            this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/own',
            method: "get",
            headers: getHeaderName(),
            }).then(res => {
            resolve(res)

            }).catch(error => {
                reject(error)
            })
        })
    },
    getDepartmentFilter() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/tree',
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.departmentFilterData = res.data.data.tree_data
        }).catch(error => {
        })
    },
    getDepartmentAllFilter() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/all_tree',
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.departmentAllData = res.data.data.tree_data
        })
    },
    getDetails(id,type){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/'+id,
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.itemFormData = res.data.data
            if(type == 'edit') {
            this.dialogEditVisible = true
            }
            if(type == 'show') {
            this.dialogVisible = true
            }
        })
    },
    details(id){
        this.getDetails(id,'show')
    },
    edit(id){
        this.getDetails(id,'edit')
    },
    distribute(id){
        this.employee_id = id
        this.distributeVisible = true
    },
    dispatch(id){
        this.employee_id = id
        this.dispatchVisible = true
    },
    deleteDispatch(id) {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/expatriate?employee_id=' + id,
            method: "delete",
            headers: getHeaderName(),
        }).then(res => {
            if(res.data.code == 200) {
            this.$message.success(res.data.message)
            this.params.pageNo = 1
            this.getTableDataDay()
            } else {
            this.$message.error(res.data.message)
            }
        })
    },
    toConfig() {
        this.dialogConfigVisible = true
    },
    filterM(e) {
        console.log(e)
    },
    editSubmit(e){
        let data = {}
        data['status'] = e.status
        data['working_mode'] = e.working_mode
        data['business_area'] = e.business_area
        data['technology_module'] = e.technology_module
        data['programing_language'] = e.programing_language
        data['software_platform'] = e.software_platform
        data['position'] = e.position
        data['type'] = e.type
        let list = []
        if(e.technical_field_list && e.technical_field_list.length) {
            list = e.technical_field_list.map((v) => {
            return v[v.length - 1]
            })
        }
        data['technical_field'] = list

        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/'+ e.employee_id,
            method: "post",
            headers: getHeaderName(),
            data:data
        }).then(res => {
            if(res.data.code == 200) {
            this.$message.success(res.data.message)
            this.dialogEditVisible = false
            // this.getDataList()
            this.getTableDataDay()
            } else {
            this.$message.error(res.data.message)
            }
        })
    },
    submitDispatch(data) {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/expatriate',
            method: "post",
            headers: getHeaderName(),
            data:data
        }).then(res => {
            if(res.data.code == 200) {
            this.$message.success(res.data.message)
            this.dispatchVisible = false
            // this.getDataList()
            this.getTableDataDay()
            } else {
            this.$message.error(res.data.message)
            }
        })
    },
    submitManPowerMon(data) {
        this.loadingBtn = true
        let params = data
        params['month_display'] = this.selectWeek1.join()
        this.$axios({
            url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_employee/month_assign`,
            method: "post",
            headers: getHeaderName(),
            data: params
        }).then(res => {
            this.manPowerVisible1 = false
            this.colorShow = false
            this.loadingBtn = false
            if(res.data.status == 'success') {
                this.$message.success(res.data.message)
            } else {
                this.$message({
                    showClose: true,
                    dangerouslyUseHTMLString: true,
                    message: res.data.message,
                    type: 'warning',
                    duration: 1000 * 5,

                });
            }
            this.getTableDataDay()
            this.getTableDataMonth()
        })
    },
    submitManPower(data) {
        this.loadingBtn = true
        let params = data
        this.$axios({
            url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_employee/assign`,
            method: "post",
            headers: getHeaderName(),
            data: params
        }).then(res => {
            this.manPowerVisible = false
            this.colorShow = false
            this.loadingBtn = false
            if(res.data.status == 'success') {
                this.$message.success(res.data.message)
            } else {
                this.$message({
                    showClose: true,
                    dangerouslyUseHTMLString: true,
                    message: res.data.message,
                    type: 'warning',
                    duration: 1000 * 5,

                });
            }
            this.getTableDataDay()
            this.getTableDataMonth()
        })
    },
    configChange() {
        this.getFilter()
        this.getSingleFilter()
    },
    openAssist() {
        this.assistVisible = true
    },
    pageNoChange(val) {
        this.params.pageNo = val
        if(this.activeName=="first"){
            this.getTableDataDay()
        }else{
                this.getTableDataMonth()
        }
    },
    pageSizeChange(val) {
        this.params.pageSize = val
        if(this.activeName=="first"){
            this.getTableDataDay()
        }else{
                this.getTableDataMonth()
        }
    },
    changeFilter(value) {
        this.params.pageNo = 1
        this.params.pageSize = 10
        this.currentPageG = 1
        this.getTableDataDay()
        this.getTableDataMonth()
       
    },
    changeProjectFilter(value) {
        if(value) {
            this.params['technical_field'] = []
            this.defaultWeekTime()
            this.getTableDataDay()
            this.getTableDataMonth()
        } else {
            this.params.pageNo = 1
            this.getTableDataDay()
            this.getTableDataMonth()
        }
    },
    }
}

</script>
<style lang="scss" scoped>
@import '../../assets/common/common.scss';

body /deep/.el-table::before {
    z-index: inherit;
}
/deep/.el-table__body-wrapper{
    z-index: 2
}
/deep/ .el-table th.gutter {
  display: table-cell !important;
}

/deep/ .el-dialog__body {
  border-top: 1px solid #b2b2b2;
}
/deep/ .el-table td.cell-two {
  background-color:#eb070763  !important;
  color: #82848a;
}
/deep/ .el-table td.cell-three {
  background-color:#13ce666b  !important;
  color: #82848a;
}

/deep/ .el-divider__text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  background-color: #e6a23c;
  padding: 6px 16px;
}

/deep/ .el-divider--horizontal {
  margin: 40px 0;
  height: 2px;
}
/deep/ .el-table td.cell-one {
  background-color:#feecbade  !important;
  color: #82848a;
}
/deep/ .el-table td.cell-zore {
  background-color:#eb070763 !important;
  color: #82848a;
}
/deep/ .el-table td.cell-grey {
  background-color:#909399 !important;
  color: #fff;
}
/deep/ .el-table td.cell-red {
  background-color:#ff4949 !important;
  color: #fff;
}
/deep/ .el-table td.cell-yellow {
  background-color:#ffba00 !important;
  color: #fff;
}
/deep/ .el-table td.cell-green {
  background-color:#13ce66 !important;
  color: #fff;
}
/deep/ .el-table td.cell-light {
  background-color:#c5c4c1 !important;
  color: #fff;
}
/deep/ .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 24px;
}
/deep/.el-table .warning-row {
    background: oldlace;
  }

/deep/.el-table .success-row {
  background: #f0f9eb;
}
.inpBorder{
  height: 32px;
  border-radius:5px;
  border-color:rgba(255,255,255,0.5) #c0c4cc #c0c4cc rgba(255,255,255,0.5)}
.search{
  width: 180px;
  margin-bottom: 10px;
}
.borders{
  border-bottom: 1px solid #c5c4c1;
  width:204px;
  margin-left: -14px;
  margin-top:10px;
  margin-bottom:10px;
  height: 32px;
}
.icon-item {
  float: right;
  margin-top: 15px;
  cursor: pointer;
}
.icon-item img {
  width: 30px;
  height: 30px;
}
.dept_word {
  font-size: 20px;
  line-height: 30px;
  margin-top: 10px;
}
.num_word {
  font-size: 16px;
  line-height: 30px;
  margin-top: 10px;
  margin-bottom: 15px;
}

#wrapper {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.tag-m {
  margin: 0 10px 10px 0;
}
.col-width {
  min-width: 80px;
}
.col-box {
  display: flex;
  margin-bottom: 10px;
  .col-span {
    min-width: 80px;
    line-height: 36px;
    margin-left: 20px
  }
}
.advance-btn {
  color: #1890ff;
  font-size: 14px;
  text-align: center;
  // padding-top: 10px;
  cursor: pointer;
}
.advance-box {
  overflow: hidden;
  &.advance-hidden {
    max-height: 0;
    transition: max-height 0.50s cubic-bezier(0, 1, 0, 1);
  }
  &.advance-show {
    max-height: 999px;
    transition: max-height 0.50s cubic-bezier(1, 0, 1, 0);
  }
}
.status-box {
  height: 40px;
  line-height: 40px;
  transform: rotate(-30deg);
}
.status-style {
  border: 2px solid red;
  border-radius: 4px;
  color: red;
  background-color: transparent;
}

.box {
  display: flex;

  div {
    margin: auto;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 1s ease;
}

.fade-enter,
.fade-leave-to {
  height: 0;
}
.toTop {
  position: fixed;
  bottom: 80px;
  right: 25px;
  z-index: 10;
}

.details {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

.choose {
  padding: 20px 0;

  .flex-box {
    display: flex;
    flex-wrap: nowrap;

    .flexEl {
      flex: 1;
      margin: auto;
    }

    .text-align {
      text-align: center;
    }

    .el {
      flex: 0 0 90%;
    }
  }

  .time {
    position: absolute;
    top: 20px;
    right: 41%;
    font-size: 14px;
    color: #606266;
  }

  .newReport {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

.border {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.primary {
  color: #409EFF;
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}

.bgColor {
  background: #fff;
}

.pad {
  padding: 0 20px;
  padding-top: 20px;
}

.marTB {
//   margin-top: 20px;
  // margin-bottom: 20px;
}

.btn-group {
  text-align: right;
}

.mar {
  margin: 0 20px;
  margin-top: 20px;
}

.table {
  padding-bottom: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.btnStyle {
    float:right;
    margin:-40px 10px 10px 0
}
.form-box {
    min-height: 300px;
}
.form-btn {
    text-align: right;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 36px;
line-height: 34px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.title {
    font-size: 16px;
    margin-bottom: 20px;
}
</style>
